Öğeleri taşımaya ve yeniden boyutlandırmaya ilişkin seçenekler

Bir öğenin konumu ve boyutu, HTML5 kullanılarak iki temel şekilde değiştirilebilir. İlk yöntem, konumun belirtilmesi için öğenin üst ve sol koordinatlarının, boyutun belirtilmesi için de genişliği ve yüksekliğinin kullanılmasıdır. İkinci yöntem, öğelerin çevrilmesi ve ölçeklenmesi için CSS transform özelliğinin kullanılmasını içerir.

Google Web Designer bunların ikisini de kullanır. Öğe düzeninde Google Web Designer, öğeleri konumlandırmak için üst ve sol değerleri, boyutu ayarlamak için de genişlik ve yükseklik değerlerini kullanır. CSS transform özelliği, daha yüksek kare hızı ve daha kesintisiz animasyon sağladığından, CSS tabanlı animasyon oluşturulurken Google Web Designer tarafından varsayılan yöntem olarak kullanılır.

Dönüştürme araçlarında varsayılan ayarları kullandığınızda, bu ayarlar hem düzen hem de animasyon için doğru şekilde çalışır. Bununla birlikte, isterseniz öğelerin ölçeklenmesi ve konumlandırılması için kullanılan yöntemi değiştirebilirsiniz.

Sınırlamalar

• Hareket yolları, yukarı/sol konumlandırmayla çalışmaz.
• AMPHTML reklamlardaki animasyonlar üst/sol konumlandırmasına veya genişlik/yükseklik boyutlandırmasına dayalı olamaz.

Konumlandırma stilini değiştirme

Konumlandırma stilini değiştirmek için:

1. Araç çubuğunda Seçim aracını tıklayın.
2. Konumlandırma stili seçeneği düğmesini tıklayın.
3. Pop-up menüsünden bir konumlandırma stili seçin:

   Konumlandırma stili	Açıklama
   Varsayılan konumlamayı kullan	Düzen için üst/sol konumlandırmasını ve konumu canlandırırken transform:translate3d() yöntemini tercih edin.
   Yukarı/sol konumlamasını kullan	Bir öğeyi animasyon karesi içinde konumlandırırken üst/sol değerlerini kullanın.
   3D çevirmeyi kullan	Bir öğeyi animasyon karesi içinde konumlandırırken transform:translate3d() değerlerini kullanın.

Boyutlandırma stilini değiştirme

Boyutlandırma stilini değiştirmek için:

1. Araç çubuğunda Seçim aracını tıklayın.
2. Boyutlandırma stil seçeneği düğmesini tıklayın.
3. Pop-up menüsünden bir boyutlandırma stili seçin:

   Boyutlandırma stili	Açıklama
   Varsayılan boyutlandırmayı kullan	Düzen için genişlik ve yüksekliği, boyutu canlandırırken de transform:scale3d() yöntemini tercih edin
   Genişlik ve yüksekliği kullan	Bir öğeyi animasyon karesi içinde boyutlandırırken genişlik/yükseklik değerlerini kullanın.
   3D ölçeklemeyi kullan	Bir öğeyi animasyon karesi içinde boyutlandırırken transform:scale3d() değerlerini kullanın.

Dönüşüm denetimleri

Araç seçenekleri çubuğundaki Dönüşüm Denetimi onay kutusu işaretli olduğunda Seçim aracı , seçtiğiniz öğelerin boyutunu ve dönüşünü değiştirebilmenizi sağlar.

Seçimi döndürmek için:

1. Araç çubuğunda Seçim aracını tıklayın.
2. Araç seçenekleri çubuğunda Dönüştürme Kontrolü onay kutusunun seçildiğinden emin olun.
3. Nesneyi veya nesneleri seçin. Döndürme kontrolleri (iç içe geçmiş iki halka) seçimin ortasında görünür.
4. İsteğe bağlı olarak, döndürme kontrollerinin iç halkasını sürükleyip döndürmenin merkezini değiştirebilirsiniz.
5. Döndürme kontrollerinin dış halkasını sürükleyerek seçimi döndürün.
   • Döndürmeyi 45°'lik artımlarla sınırlandırmal için, nesneyi sürüklerken Üst Karakter tuşunu basılı tutun.

Bir seçimi yeniden boyutlandırmak için:

1. Araç çubuğunda Seçim aracını tıklayın.
2. Araç seçenekleri çubuğunda Dönüştürme Kontrolü onay kutusunun seçildiğinden emin olun.
3. Nesneyi veya nesneleri seçin. Seçilen öğeler mavi bir kutuyla çevrelenir.
4. Sınırlama kutusunun yanlarındaki veya köşelerindeki denetim noktalarından birini sürükleyin.
   • Seçimin orijinal en boy oranını korumak için, sürükleme sırasında üst karakter tuşunu basılı tutun.

 

SVG'leri yeniden boyutlandırma

Bir SVG resmini veya şeklini daha büyük hale getirmek için yeniden boyutlandırıyorsanız, 3D ölçeklendirme yerine genişlik ve yükseklik özelliklerini kullanın. Seçim aracı dönüştürme kontrolünü kullanıyorsanız boyutlandırma stilini değiştirmeniz gerekebilir.